@mixin flex {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
@mixin flexWrap {
  display: flex;
  flex-wrap: wrap;
}
@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
@mixin alignCenter {
  display: flex;
  align-items: center;
}
@mixin flexColumn {
  display: flex;
  flex-direction: column;
}

@mixin clearFloat {
  content: '';
  display: block;
  width: 0;
  clear: both;
}

@mixin ellipsis {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

$white: #ffffff;
$green: #42b983;
$green_shadow: rgba(66, 185, 131, 0.1);
$primary: #1890ff;
$danger: #ff7875;
$danger_shadow: rgba(255, 120, 117, 0.1);
$yellow: #ffba00;
$text-color-second: #7b7b7b;
$bgColor: #f0f0f0;
$title-color: #333;
$gray: #ececec;
$bgGray: #f7f7f7;
$translucent: rgba(255, 255, 255, 0.5);

$fontSize12: 12px;
$fontSize14: 14px;
$fontSize15: 15px;
$fontSize16: 16px;
$fontSize18: 18px;
$fontSize20: 20px;
$fontSize24: 24px;
$fontSize28: 28px;

$width0: 0;
$width2: 2px;
$width4: 4px;
$width6: 6px;
$width5: 5px;
$width8: 8px;
$width10: 10px;
$width12: 12px;
$width14: 14px;
$width16: 16px;
$width18: 18px;
$width20: 20px;
$width24: 24px;
$width30: 30px;
$width32: 32px;
$width35: 35px;
$width40: 40px;
$width80: 80px;
$width100: 100px;
$width120: 120px;
$width150: 150px;
$width200: 200px;
$width256: 256px;
$width400: 400px;
